<template>
  <div class="totalBg">
    <div class="header">
      <h3 class="title">疫情心理健康领航</h3>
      <div class="l">
        <a
          href="https://www.meiwei345.com/cn/ipad/ceshi/index1.html?bd_vid=8272673235551211356"
          class="label"
          style="text-decoration: none; color: black"
          >心理状况测评</a
        >
        <div class="label">咨询</div>
      </div>
    </div>
    <el-divider></el-divider>
    <template>
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in imageList" :key="item.name">
          <img
            :onclick="item.herf"
            :src="item.src"
            style="height: 100%; width: 100%"
            alt="图片丢失了"
            :title="item.title"
          />
        </el-carousel-item>
      </el-carousel>
    </template>

    <div class="content1">
      <i class="el-icon-s-check"></i>
      <span class="name" style="font-size: 30px">专家推荐</span>
      <span class="search"
        ><el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="toSearch"
          >搜索</el-button
        ></span
      >
      <span class="inputBg"
        ><el-input
          v-model="pageParam.username"
          placeholder="请输入专家姓名"
        ></el-input>
      </span>
    </div>
    <div class="content2">
      <template>
        <div class="avatar" v-for="(item, index) in expertInfo" :key="index">
          <el-popover
            placement="top-start"
            title="专家信息"
            width="200"
            trigger="hover"
          >
            <ul>
              <li>手机号:{{ item.telephone }}</li>
              <li>性别:{{ item.gender }}</li>
              <li>地址:{{ item.address }}</li>
            </ul>
            <el-avatar
              class="a"
              shape="circle"
              :size="100"
              :fit="fit"
              :src="item.userFace"
              slot="reference"
            >
            </el-avatar>
          </el-popover>
          <div class="expertName">{{ item.username }}</div>
        </div>
      </template>
    </div>
    <div class="content3">
      <i class="el-icon-s-data"></i>
      <span class="name" style="font-size: 30px">实体心理机构</span>
      <!-- <span class="search"
        ><el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="toSearch"
          >搜索</el-button
        ></span
      >
      <span class="inputBg"
        ><el-input
          v-model="expertInfo.name"
          placeholder="请输入机构名称"
        ></el-input>
      </span> -->
      <el-row>
        <el-col
          :span="5"
          v-for="project in institutions"
          :key="project.id"
          :offset="1"
        >
          <el-card
            :body-style="{ padding: '5px', height: '300px' }"
            shadow="hover"
            style="width: 260px; height: 320px"
          >
            <div
              style="background-color: #ff0a0605; ,padding: 2px; height: 250px"
            >
              <div style="position: relative; top: 0,height:300px">
                <img :src="project.src" class="image" />
              </div>
              <div>
                <div
                  style="
                    font-size: 20px;
                    position: relative;
                    top: 20px;
                    text-align: center;
                  "
                >
                  {{ project.name }}
                </div>
              </div>
              <div style="position: relative; top: 20px; left: 10px">
                <i class="el-icon-time"></i>可预约专家{{ project.reservation }}
              </div>
              <div style="position: relative; top: 45px">
                <el-button type="text" @click="toGo(project)"
                  ><font size="4">查看地理位置</font></el-button
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
   

<script>
import axios from "../utils/request";
export default {
  data() {
    return {
      total: "",
      pageParam: {
        page: 1,
        pageSize: 12,
        username: "",
      },
      institutions: [
        {
          id: "1",
          name: "桂林蓝精灵心理咨询工作室",
          longitude: "110.308109",
          latitude: "25.275983",
          reservation: "1",
          src: require("../assets/心理1.jpg"),
        },
        {
          id: "2",
          name: "柳州市爱心心理咨询工作室",
          longitude: "109.429593",
          latitude: "24.316572",
          reservation: "3",
          src: require("../assets/心理2.jpg"),
        },
        {
          id: "3",
          name: "南宁木子心理咨询工作室",
          longitude: "108.356039",
          latitude: "22.823341",
          reservation: "2",
          src: require("../assets/心理3.jpg"),
        },
        {
          id: "4",
          name: "上海天使心理咨询工作室",
          longitude: "121.517242",
          latitude: "31.157325",
          reservation: "5",
          src: require("../assets/心理4.jpg"),
        },
      ],
      // expertInfo: [
      //   {
      //     id: "1",
      //     name: "小盼",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      //   {
      //     id: "2",
      //     name: "小蓝",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      //   {
      //     id: "3",
      //     name: "小新",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      //   {
      //     id: "4",
      //     name: "小美",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      //   {
      //     id: "5",
      //     name: "小唐",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      //   {
      //     id: "6",
      //     name: "小猪",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      //   {
      //     id: "7",
      //     name: "小笨",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      //   {
      //     id: "8",
      //     name: "小校",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      //   {
      //     id: "9",
      //     name: "小大",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      //   {
      //     id: "10",
      //     name: "小里",
      //     url:
      //       "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //   },
      // ],
      expertInfo: [],
      imageList: [
        {
          name: "1",
          src: require("../assets/1.jpg"),
          title: "心理健康辅导",
          herf:
            "javascript:location.href='https://zhuanlan.zhihu.com/p/109495511'",
        },
        {
          name: "2",
          src: require("../assets/22.jpg"),
          title: "新冠疫情心理辅导方案",
          herf:
            "javascript:location.href='http://www.nhc.gov.cn/jkj/s3578/202003/8b44a9acf6aa4d90a51ae99eab18f1e1.shtml'",
        },
        {
          name: "3",
          src: require("../assets/3.jpg"),
          title: "国家卫健委疫情心理疏导指南",
          herf:
            "javascript:location.href='https://baijiahao.baidu.com/s?id=1657581626658195888&wfr=spider&for=pc'",
        },
        {
          name: "4",
          src: require("../assets/4.jpg"),
          title: "人民健康网",
          herf:
            "javascript:location.href='http://health.people.com.cn/GB/408576/'",
        },
        {
          name: "5",
          src: require("../assets/5.jpg"),
          title: "中小学生抗击疫情 自我心理防护指引",
          herf:
            "javascript:location.href='http://www.neixiang.gov.cn/hlnx/mryw/2020-03-24/24270.html'",
        },
      ],
    };
  },
  computed: {},
  methods: {
    toGo(item) {
      this.$router.push({
        name: "HospMap2.0",
        query: {
          longitude: item.longitude,
          latitude: item.latitude,
          name: item.name,
        },
      });
    },
    toSearch() {
      this.pageParam.page = 1;
      this.pageQuery();
    },
    async pageQuery() {
      let res = await axios.get("/baseUser/pageQuery", {
        params: this.pageParam,
      });
      console.log(res);
      this.expertInfo = res.data.list;
      this.total = res.data.total;
      console.log(this.expertInfo, "==============");
    },
  },
  created() {
    this.pageQuery();
  },
  mounted() {},
};
</script>
<style  scoped>
.totalBg {
  height: 100%;
  position: relative;
}
.header {
  height: 70px;
  width: 100%;
  position: relative;
}
.title {
  height: 80px;
  width: 300px;
  margin-top: 0;
  padding: 10px;
  font-size: 30px;
  font: 华文新魏;
  position: absolute;
}
.l {
  height: 80px;
  width: 700px;
  margin-top: 0px;
  margin-left: 300px;
  position: relative;
}
.label {
  height: 80px;
  width: 170px;
  margin-left: 10px;
  padding: 20px;
  font-size: 20px;
  display: inline-block;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.content1 {
  height: 50px;
  width: 100%;
  margin-top: 30px;
}
.name {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.block {
  display: inline-block;
  margin-left: 30px;
}
.search {
  float: right;
}
.inputBg {
  width: 200px;
  height: 30px;
  float: right;

  margin-top: 0;
  display: inline-block;
}
.content2 {
  height: 350px;
  width: 100%;
}
.avatar {
  display: inline-block;
  padding: 20px;
}
.a {
  width: 120px;
}
.expertName {
  width: 120px;
  height: 30px;
  font-size: 20px;
  margin-top: 10px;
  margin-left: 30px;
}
.content3 {
  height: 400px;
  width: 100%;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>